


var myChart = echarts.init(document.getElementById('candlestik'));

// var data0 = splitData([]);
// var data1 = calcPriceLine();
//
// var dataTest = splitData2([], []);
// var buyOpenData = getBOandSCData([], []);
//
//
// function splitData(rawData) {
//     var categoryData = [];
//     var values = [];
//     for (var i = 0; i < rawData.length; i++) {
//         categoryData.push(String(rawData[i].splice(0, 1)[0]));
//         values.push(rawData[i])
//     }
//     return {
//         categoryData: categoryData,
//         values: values
//     };
// }
//
//
// function getBOandSCData(rawData1, rawData) {
//
//     var BOvalues = [];
//     var SCvalues = [];
//     var SOvalues = [];
//     var BCvalues = [];
//     for (var i = 0; i < rawData1.length; i++) {
//         for (var j = 0; j < rawData.length; j++) {
//             if (rawData1[i][0] == rawData[j][0]) {
//
//                 if ((0 == rawData[j][3]) && (0 == rawData[j][4])) {
//                     BOvalues.push(rawData[j]);
//                 }
//
//
//                 if ((1 == rawData[j][3]) && (1 == rawData[j][4])) {
//                     SCvalues.push(rawData[j]);
//                 }
//
//
//                 if ((0 == rawData[j][3]) && (1 == rawData[j][4])) {
//                     BCvalues.push(rawData[j]);
//                 }
//
//
//                 if ((1 == rawData[j][3]) && (0 == rawData[j][4])) {
//                     SOvalues.push(rawData[j]);
//                 }
//                 break;
//             }
//         }
//     }
//     return {
//
//         bovalue: BOvalues,
//         scvalue: SCvalues,
//         bcvalue: BCvalues,
//         sovalue: SOvalues
//     };
// }
//
// function splitData2(rawData1, rawData) {
//     var categoryData = [];
//     var values = [];
//     var invalidData = [];
//     for (var i = 0; i < rawData1.length; i++) {
//         for (var j = 0; j < rawData.length; j++) {
//             if (rawData1[i][0] == rawData[j][0]) {
//                 values.push(rawData[j]);
//                 invalidData = [rawData[j][0], '-'];
//                 if (rawData[j][3] == 1) {
//                     values.push(invalidData);
//                 }
//
//                 break;
//             }
//         }
//     }
//     return {
//         categoryData: categoryData,
//         values: values
//     };
// }
//
// function calcPriceLine() {
//     var values = [];
//     for (var i = 0; i < data0.values.length; i++) {
//         values.push(data0.values[i][2])
//     }
//     return {
//         values: values
//     };
// }
//
// function calculateMA(dayCount) {
//     var result = [];
//     for (var i = 0, len = data0.values.length; i < len; i++) {
//         if (i < dayCount) {
//             result.push('-');
//             continue;
//         }
//         var sum = 0;
//         for (var j = 0; j < dayCount; j++) {
//             sum += data0.values[i - j][2];
//         }
//         result.push((sum / dayCount).toFixed(3));
//     }
//     return result;
// }

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['K-Line',  'SELL PRICE', 'SELL PRICE'],
        // selected: {
        //     'MA10': false,
        //     'MA30': false,
        //     'BUY CLOSE': false,
        //     'SELL OPEN': false
        // }
    },
    grid: {
        left: 50,
        right: 15
    },
    xAxis: {
        type: 'category',
        data: null,
        scale: true,
        boundaryGap: false,
        axisLine: {onZero: false},
        splitLine: {show: false},
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax'
    },
    yAxis: {
        scale: true,
        splitArea: {
            show: true
        }
    },
    dataZoom: [
        {
            type: 'inside',
            start: 0,
            end: 100
        },
        {
            show: true,
            type: 'slider',
            y: '90%',
            start: 50,
            end: 100
        }
    ],
    series: [
        {
            name: 'Time',
            type: 'line',
            symboList: 'none',
            data: null,
            itemStyle: {
                normal: {
                    color: '#FF2D2D',
                    opacity: 0.5
                }
            }
        },
        {
            name: 'SELL PRICE',
            type: 'effectScatter',
            data: buyOpenData.bcvalue,
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {color: '#28004d'},
                shadowBlur: 10,
                shadowColor: '#333',
                opacity: 0.4
            }
        },
        {
            name: 'SELL PRICE',
            type: 'effectScatter',
            data: null,
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {color: '#750000'},
                shadowBlur: 10,
                shadowColor: '#333',
                opacity: 0.4
            }
        }
    ]
};

myChart.setOption(option);



//
// // myChart2
// var base = +new Date(1968, 9, 3);
// var oneDay = 24 * 3600 * 1000;
// var date = [];
// var data = [Math.random() * 300];
// for (var i = 1; i < 20000; i++) {
//     var now = new Date(base += oneDay);
//     date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
//     data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
// }
// var myChart2 = echarts.init(document.getElementById('cumulativereturns'));
// var data = null;
// var date = null;
//
//
// option2 = {
//     tooltip: {
//         trigger: 'axis',
//         position: function (pt) {
//             return [pt[0], '10%'];
//         }
//     },
//     title: {
//         left: '0',
//         text: '净值曲线'
//     },
//     toolbox: {
//         feature: {
//             dataZoom: {
//                 yAxisIndex: 'none'
//             },
//             restore: {},
//             saveAsImage: {}
//         }
//     },
//     grid: {
//         left: 50,
//         right: 15
//     },
//     xAxis: {
//         type: 'category',
//         boundaryGap: false,
//         data: date
//     },
//     yAxis: {
//         type: 'value',
//         boundaryGap: [0, '100%'],
//         splitArea: {
//             show: true
//         }
//     },
//     dataZoom: [{
//         type: 'inside',
//         start: 0,
//         end: 100
//     }],
//     series: [
//         {
//             name: '净值',
//             type: 'line',
//             smooth: true,
//             symbol: 'none',
//             sampling: 'average',
//             itemStyle: {
//                 normal: {
//                     color: 'rgb(51, 72, 133)'
//                 }
//             },
//             areaStyle: {
//                 normal: {
//                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//                         offset: 0,
//                         color: 'rgb(68, 125, 204)'
//                     }, {
//                         offset: 1,
//                         color: 'rgb(255, 255, 255)'
//                     }])
//                 }
//             },
//             data: data
//         }
//     ]
// };
// myChart2.setOption(option2);
//
//
//
//
// // myChart3
// var myChart3 = echarts.init(document.getElementById('monthlyreturns'));
// var years = null;
// var profits = null;
// var months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
// profits = profits.map(function (item) {
//     return [item[1], item[0], item[2] || '-'];
// });
// option3 = {
//     title: {left: '0', text: '月度收益率'},
//     tooltip: {
//         position: 'top',
//         formatter: function (params) {
//             var seriesName = params.seriesName;
//             var yearSelected = years[params.value[1]];
//             var monthSelected = params.name;
//             var value = params.value[2];
//             return seriesName + '<br />' + yearSelected + monthSelected + '：' + value + '%';
//         }
//     },
//     toolbox: {feature: {saveAsImage: {}}},
//     animation: false,
//     grid: {left: 50, right: 10},
//     xAxis: {
//         type: 'category',
//         data: months,
//         splitArea: {show: true},
//         IsStaggered: {show: true}
//     },
//     yAxis: {
//         type: 'category',
//         data: years,
//         splitArea: {show: true}
//     },
//     visualMap: {
//         show: false,
//         orient: 'horizontal',
//         bottom: '50%',
//         pieces: [
//             {min: 55, color: '#800000'},
//             {min: 34, max: 55, color: '#900000'},
//             {min: 21, max: 34, color: '#a00000'},
//             {min: 13, max: 21, color: '#b00000'},
//             {min: 8, max: 13, color: '#d00000'},
//             {min: 7, max: 8, color: '#f00000'},
//             {min: 6, max: 7, color: '#ff1111'},
//             {min: 5, max: 6, color: '#ff3333'},
//             {min: 4, max: 5, color: '#ff5555'},
//             {min: 3, max: 4, color: '#ff7777'},
//             {min: 2, max: 3, color: '#ff9999'},
//             {min: 1, max: 2, color: '#ffbbbb'},
//             {min: 0, max: 1, color: '#ffdddd'},
//             {min: -1, max: 0, color: '#ddffdd'},
//             {min: -2, max: -1, color: '#ccffcc'},
//             {min: -3, max: -2, color: '#bbffbb'},
//             {min: -4, max: -3, color: '#00ff00'},
//             {min: -5, max: -4, color: '#00f000'},
//             {min: -6, max: -5, color: '#00e000'},
//             {min: -7, max: -6, color: '#00d000'},
//             {min: -8, max: -7, color: '#00c000'},
//             {min: -13, max: -8, color: '#00b000'},
//             {min: -21, max: -13, color: '#00a000'},
//             {min: -34, max: -21, color: '#009000'},
//             {min: -55, max: -34, color: '#009000'},
//             {max: -55, color: '#008000'}
//         ]
//     },
//     series: [{
//         name: '收益率',
//         type: 'heatmap',
//         data: profits,
//         label: {
//             normal: {
//                 show: true,
//                 textStyle: {color: 'rgba(0, 0, 0, 1)'}
//             }
//         }
//     }]
// };
// myChart3.setOption(option3);
//
//
//
//
// // myChart4
// var myChart4 = echarts.init(document.getElementById('annualreturns'));
// var years = null;
// var profits = null;
// option4 = {
//     title: {
//         left: '0',
//         text: '年度收益率',
//     },
//     toolbox: {feature: {saveAsImage: {}}},
//     tooltip: {
//         trigger: 'axis',
//         axisPointer: {type: 'shadow'},
//         formatter: '{a}<br />{b}: {c}%'
//     },
//     grid: {left: 50, right: 10,},
//     xAxis: [{
//         type: 'value',
//         splitArea: {show: true}
//     }],
//     yAxis: [{
//         type: 'category',
//         axisTick: {show: false},
//         splitArea: {show: true},
//         data: years
//     }],
//     series: [{
//         data: profits,
//         name: '收益率',
//         type: 'bar',
//         label: {normal: {show: true, position: 'inside'}},
//
//         itemStyle: {
//             normal: {
//                 color: function (params) {
//                     return params.value > 0 ? 'red' : 'green';
//                 }
//             }
//         },
//
//         markLine: {
//             data: [{
//                 type: 'average',
//                 name: '平均收益率',
//                 itemStyle: {
//                     normal: {
//                         lineStyle: {width: 3, type: 'dotted', color: 'orange'},
//                         label: {
//                             formatter: '{b}：{c}%',
//                             textStyle: {fontWeight: 'bold', fontSize: 16,},
//                         },
//                     }
//                 }
//             }]
//         }
//     },
//
//         {
//             name: '辅助线',
//             data: [0,],
//             type: 'bar',
//             markLine: {
//                 symbol: ['none', 'none'],
//                 data: [{
//                     xAxis: 0,
//                     itemStyle: {
//                         normal: {
//                             lineStyle: {width: 3, type: 'solid', color: 'black'},
//                             label: {show: false}
//                         }
//                     }
//                 }]
//             }
//         }]
// };
// myChart4.setOption(option4);
//
//
//
//
// // myChart5
// function renderItem(params, api) {
//     var yValue = api.value(2);
//     var start = api.coord([api.value(0), yValue]);
//     var size = api.size([api.value(1) - api.value(0), yValue]);
//
//     return {
//         type: 'rect',
//         shape: {
//             x: start[0],
//             y: start[1],
//             width: size[0] - 1,
//             height: size[1]
//         },
//         style: api.style()
//     };
// }
// var myChart5 = echarts.init(document.getElementById('monthDistribution'));
// var distData = null;
// option5 = {
//     title: {text: '月度收益率分布', left: 'left'},
//     toolbox: {feature: {saveAsImage: {}}},
//     tooltip: {
//         formatter: function (params) {
//             var value = params.value;
//             if ($.isArray(value))
//                 return value[0] + '%~' + value[1] + '%：' + value[2] + '次';
//             else
//                 return '';
//         }
//     },
//     grid: {left: 50, right: 10},
//     xAxis: {
//         type: 'value',
//         splitArea: {show: true}
//     },
//     yAxis: {
//         type: 'value',
//         splitArea: {show: true}
//     },
//     series: [{
//         type: 'custom',
//         renderItem: renderItem,
//         label: {
//             normal: {
//                 show: false,
//                 position: 'top'
//             }
//         },
//         itemStyle: {
//             normal: {
//                 color: function (params) {
//                     return params.value[1] > 0 ? 'red' : 'green';
//                 }
//             },
//
//             emphasis: {
//                 color: function (params) {
//                     return params.value[1] > 0 ? 'green' : 'red';
//                 }
//             }
//         },
//         encode: {
//             x: [0, 1],
//             y: 2,
//             tooltip: [0, 1, 2]
//         },
//         markLine: {
//             data: [{
//                 type: 'average',
//                 valueIndex: 0,
//                 name: '平均收益率',
//                 itemStyle: {
//                     normal: {
//                         lineStyle: {width: 3, type: 'dotted', color: 'orange'},
//                         label: {
//                             formatter: '{b}：{c}%',
//                             textStyle: {
//                                 fontWeight: 'bold',
//                                 fontSize: 16
//                             }
//                         }
//                     }
//                 }
//             }]
//         },
//         data: distData
//     },
//         {
//             name: '辅助线',
//             type: 'bar',
//             data: [0],
//             markLine: {
//                 symbol: ['none', 'none'],
//                 data: [{
//                     xAxis: 0,
//                     itemStyle: {
//                         normal: {
//                             lineStyle: {width: 3, type: 'solid', color: 'black'},
//                             label: {show: false}
//                         }
//                     }
//                 }]
//             }
//         }]
// };
// myChart5.setOption(option5);
//
//
//
//
 // myChart6
// function axisName(param) {
//     if (param == '0')
//         return 'Daily';
//     else if (param == '1')
//         return 'Weekly';
//     else if (param == '2')
//         return 'Monthly';
//     else
//         return "";
// }
// var myChart6 = echarts.init(document.getElementById('returnsBoxPlot'));
// var data = null;
// var data6 = echarts.dataTool.prepareBoxplotData(data);
// option6 = {
//     title: [{text: '回报箱型图', left: '0',},],
//     toolbox: {feature: {saveAsImage: {}}},
//     tooltip: {
//         trigger: 'item',
//         axisPointer: {
//             type: 'shadow'
//         }
//     },
//     grid: {left: 50, right: 10},
//     xAxis: {
//         type: 'category',
//         data: data6.axisData,
//         boundaryGap: true,
//         nameGap: 30,
//         splitArea: {
//             show: true
//         },
//         axisLabel: {
//             formatter: function (param) {
//                 return axisName(param);
//             }
//         },
//         splitLine: {
//             show: false
//         }
//     },
//     yAxis: {
//         type: 'value',
//         name: '(%)',
//         splitArea: {
//             show: false
//         }
//     },
//     series: [
//         {
//             name: 'boxplot',
//             type: 'boxplot',
//             boxWidth: ['%30', '50%'],
//             data: data6.boxData,
//             tooltip: {
//                 formatter: function (param) {
//                     return [
//                         axisName(param.name) + ': ',
//                         'upper: ' + param.data[4],
//                         'Q3: ' + param.data[3],
//                         'median: ' + param.data[2],
//                         'Q1: ' + param.data[1],
//                         'lower: ' + param.data[0]
//                     ].join('<br/>')
//                 }
//             }
//         },
//         {
//             name: 'outlier',
//             type: 'scatter',
//             data: data6.outliers
//         }
//     ]
// };
// myChart6.setOption(option6);



window.onresize = function () {
    myChart.resize();
    // myChart2.resize();
    // myChart3.resize();
    // myChart4.resize();
    // myChart5.resize();
    // myChart6.resize();
}